<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Add user joining project</title>
        <style type="text/css">
            #add_user {
                background: #747474;
                margin: 20px auto;
                border: 1px #747474 solid;
                width: 620px;
                color: #004197;
                z-index: 1001;
            }

            #add_user div {
                background: #FFFFFF;
                margin: 6px;
                overflow: hidden;
            }

            #add_user .close_login {
                height: 18px;
                width: 18px;
                border: none;
                float: right;
                cursor: pointer;
            }

            #add_user div h2 {
                margin-top: 15px;
                padding: 4px;
                color: #000033;
                height: 30px;
                text-align: center;
                text-indent: 15px;
                border-bottom: 2px #CCCCCC solid;
            }

            #add_user select {
                width: 250px;
            }

            #add_user button.add {
                margin-right: 5px;
                width: 50px;
                height: 50px;
                border: none;
                background: transparent url("/JudiBlog/img/icon-next.png") left center no-repeat;
            }

            #add_user button.remove {
                margin-right: 5px;
                width: 50px;
                height: 50px;
                border: none;
                background: transparent url("/JudiBlog/img/icon-previous.png") left center no-repeat;
            }

            #add_user input.apply, #add_user input.cancel {
                margin-top: 5px;    
                padding:10px !important;
                width: 70px;
                font-size:14px;
                color:#FFF;
                text-align:center;
                background-color:#519cff;
                border:1px #519dff solid ;
                background: #519dff;
                border-radius: 5px;
            }

            #add_user input.apply:hover, #add_user input.cancel:hover {
                cursor: pointer;
                color: #519dff;
                background: white;
            }

            #add_user table {
                padding: 10px;
            }

            #add_user table td {
                padding: 5px 0 10px 0;
                text-align: center;
            }

            #add_user table td label {
                font: normal normal normal 18px/1.5em tahoma, tahoma-w01-regular, tahoma-w02-regular, tahoma-w10-regular, tahoma-w15--regular, tahoma-w99-regular, sans-serif;
                font-family: tahoma, tahoma-w01-regular, tahoma-w02-regular, tahoma-w10-regular, tahoma-w15--regular, tahoma-w99-regular, sans-serif;
                font-size: 18px;
                font-style: normal;
                font-variant: normal;
                font-weight: normal;
                color: #C5C3C3;
            }
        </style>

        <script type="text/javaScript">
            function moveToRightOrLeft(side){
            var listLeft=document.getElementById('selectLeft');
            var listRight=document.getElementById('selectRight');

            if(side==1){
            if(listLeft.options.length==0){
            alert('You have already moved all countries to Right');
            return false;
            }else{
            var selectedCountry=listLeft.options.selectedIndex;

            move(listRight,listLeft.options[selectedCountry].value,listLeft.options[selectedCountry].text);
            listLeft.remove(selectedCountry);

            if(listLeft.options.length>0){
            listLeft.options[0].selected=true;
            }
            }
            }else if(side==2){
            if(listRight.options.length==0){
            alert('You have already moved all countries to Left');
            return false;
            }else{
            var selectedCountry=listRight.options.selectedIndex;

            move(listLeft,listRight.options[selectedCountry].value,listRight.options[selectedCountry].text);
            listRight.remove(selectedCountry);

            if(listRight.options.length>0){
            listRight.options[0].selected=true;
            }
            }
            }
            }

            function move(listBoxTo,optionValue,optionDisplayText){
            var newOption = document.createElement("option"); 
            newOption.value = optionValue; 
            newOption.text = optionDisplayText; 
            listBoxTo.add(newOption, null); 
            return true; 
            };
            function selectAllList(listbox) {
            var multi = document.getElementById(listbox.id);
            for (var i = 0; i < multi.options.length; i++) {
            multi.options[i].selected = true;
            }
            };
        </script>
    </head>
    <body>
        <div id="add_user">
            <div>
                <h2>Add User</h2>
                <form action="/JudiBlog/postproject?id=${currentProject.getProjectID()}" method="post" onsubmit="selectAllList(userJoined);">
                    <table>
                        <tr>
                            <td><label>User List</label></td>
                            <td></td>
                            <td></td>
                            <td><label>User Joined</label></td>
                        </tr>
                        <tr>
                            <td rowspan="3" align="right"><label>
                                    <select name="userNotJoin" size="10" id="selectLeft" multiple="multiple"> 
                                        <c:forEach items="${currentProject.getUserListNotJoin()}" var="userList">
                                            <option value="${userList.getUserName()}">${userList.getUserName()}</option>
                                        </c:forEach>
                                    </select>
                                </label></td>
                            <td align="left">&nbsp;</td>
                            <td align="left">&nbsp;</td>
                            <td rowspan="3" align="left">
                                <select name="userJoined" size="10" id="selectRight" multiple="multiple">
                                    <c:forEach items="${currentProject.getUserList()}" var="userList">
                                        <option value="${userList.getUserName()}" selected>${userList.getUserName()}</option>
                                    </c:forEach>
                                </select></td>
                        </tr>
                        <tr>
                            <td align="left">&nbsp;</td>
                            <td align="left"><label>
                                    <button class="add" name="btnRight" type="button" id="btnRight" onClick="javaScript:moveToRightOrLeft(1);"></button>
                                </label></td>
                        </tr>
                        <tr>
                            <td align="left">&nbsp;</td>
                            <td align="left">
                                <label>
                                    <button class="remove" name="btnLeft" type="button" id="btnLeft" onClick="javaScript:moveToRightOrLeft(2);"></button>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <input type="submit" name="submit" value="Apply" class="apply"/>
                                <input type="submit" name="submit" value="Cancel" class="cancel"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </body>
</html>